<script lang="ts" setup>

import { defineComponent, ref } from 'vue'
import { completeTask, getMyTaskList } from '@/api/activiti/take'

defineComponent({
  name: 'Work'
})

// 表格
const takeList = ref([])

// 分页
const queryParams = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

/**
 * 获取列表
 */
async function getList() {
  const { data: { data, total } } = await getMyTaskList(queryParams.value)
  takeList.value = data
  queryParams.value.total = total
}

/**
 * 分页更改
 */
function onPageChange(page) {
  queryParams.value.current = page
  getList()
}

/**
 * 修改流程实例状态
 */
async function complete(id) {
  const { data } = await completeTask(id)
  if (data) {
    await getList()
  }
}

getList()

</script>

<template>
  <div class="container">
    <Breadcrumb :items="['menu.workflow', 'menu.workflow.work']" />
    <a-card class="general-card" :title="$t('menu.workflow.work')">
      <a-divider style="margin-top: 0" />

      <a-table :data="takeList" :pagination="queryParams" @page-change="onPageChange">
        <template #columns>
          <a-table-column title="编号" :width="220" tooltip ellipsis align="center" data-index="id" />
          <a-table-column title="流程名称" align="center" data-index="name" />
          <a-table-column title="办理人" align="center" data-index="assignee" />
          <a-table-column title="创建时间" align="center" data-index="createdDate" />
          <a-table-column title="操作" align="center">
            <template #cell="{record}">
              <a-space>
                <a-popconfirm content="确认要完成吗" type="success" @click="complete(record.id)">
                  <a-button type="primary" size="mini">完成</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

    </a-card>
  </div>
</template>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

:deep(.arco-upload-progress) {
  display: none;
}

.box {
  display: flex;
  height: 100vh;

  #js-canvas {
    flex-grow: 1;
    overflow: hidden;
  }

  #js-properties-panel {
    height: 100vh;
    overflow-y: auto;
  }
}

</style>